import {rightTime} from "./clickTime";
import {keyConfig, speed} from "../../utils/config"

export function keyboardEvent() {
    document.onkeydown = function (event) {
        try{
            keyConfig.forEach(v => {
                var e = event || window.event || arguments.callee.caller.arguments[v.key];
                let now = Date.now()
                if (e && e.keyCode == v.keyCode) {
                    let slot = document.getElementsByClassName("keyItem")[v.key];
                    slot.style.background = "#AB9D96";
                    console.log(rightTime)
                    if (!rightTime['key' + v.key].length) return false
                    let useTime = now - rightTime['key' + v.key][0].timeStamp
                    if (useTime > speed.time - speed.pRange && useTime < speed.time + speed.pRange) {
                        console.log('perfect')
                        perfectAction()
                        clearTimeout(rightTime['key' + v.key][0].timer)
                        rightTime['key' + v.key].splice(0, 1)
                    } else if (useTime > speed.time - speed.gRange && useTime < speed.time + speed.gRange) {
                        console.log('good')
                        goodAction()
                        clearTimeout(rightTime['key' + v.key][0].timer)
                        rightTime['key' + v.key].splice(0, 1)
                    } else if (useTime < speed.time - speed.gRange){
                        console.log('miss')
                        missAction()
                        clearTimeout(rightTime['key' + v.key][0].timer)
                        let node = rightTime['key' + v.key][0].node
                        node && node.remove();
                        rightTime['key' + v.key].splice(0, 1)
                    }
                }
            })
        }catch(e){
            return false
        }
    };

    document.onkeyup = function (event) {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 90) {
            let slot = document.getElementsByClassName("keyItem")[0];
            slot.style.background = "black";
        }
        if (e && e.keyCode == 88) {
            let slot = document.getElementsByClassName("keyItem")[1];
            slot.style.background = "black";
        }
        if (e && e.keyCode == 78) {
            let slot = document.getElementsByClassName("keyItem")[2];
            slot.style.background = "black";
        }
        if (e && e.keyCode == 77) {
            let slot = document.getElementsByClassName("keyItem")[3];
            slot.style.background = "black";
        }
    };
}
export function nodeEvent(el, index, id) {
    let node = document.createElement("div");
   
    node.className = "node";
    node.id = id;
    node.style.animationDuration = speed.time*2/1000 + 's'
    el.appendChild(node);
    let newTime = setTimeout(() => {
        node && node.remove();
        rightTime['key' + index].splice(0, 1)
        missAction()
    }, speed.time + speed.gRange);
    rightTime['key' + index].push({
        timer: newTime,
        timeStamp: Date.now(),
        node: node
    })
}

let missTimer
function missAction() {
    missTimer && clearTimeout(missTimer)
    let perfect = document.getElementById('perfect')
    let good = document.getElementById('good')
    let miss = document.getElementById('miss')
    perfect.style.display = 'none'
    good.style.display = 'none'
    miss.style.display = 'block'
    missTimer = setTimeout(()=> {
        miss.style.display = 'none'
    },500)
}

let perfectTimer
function perfectAction() {
    perfectTimer && clearTimeout(perfectTimer)
    let perfect = document.getElementById('perfect')
    let good = document.getElementById('good')
    let miss = document.getElementById('miss')
    perfect.style.display = 'block'
    good.style.display = 'none'
    miss.style.display = 'none'
    perfectTimer = setTimeout(()=> {
        perfect.style.display = 'none'
    },500)
}

let goodTimer
function goodAction() {
    goodTimer && clearTimeout(goodTimer)
    let perfect = document.getElementById('perfect')
    let good = document.getElementById('good')
    let miss = document.getElementById('miss')
    perfect.style.display = 'none'
    good.style.display = 'block'
    miss.style.display = 'none'
    goodTimer = setTimeout(()=> {
        good.style.display = 'none'
    },500)
}